<script setup lang="ts">
import { sendUserLoginSms } from '@/api/access'
import { useUserStore } from '@/stores/user'
import { useToast } from 'nutui-uniapp/composables'
import { reactive, ref } from 'vue'
import { checkRules } from './rules'

// 外部参数
const props = defineProps({
  // 是否显示版权信息
  showCopyright: {
    type: Boolean,
    default: true,
  },
})

const toast = useToast()

// 用户存储
const userStore = useUserStore()

// 状态参数
const state = reactive({
  // 登录类型
  loginType: 'phone',
  // 验证码重试倒计时
  smsRetryTimes: 0,
  // 版权信息
  copyright: '© 2025 xxx 版权所有',
})

// 表单
const formData = ref({
  phone: '',
  code: '',
  passport: '',
  password: '',
})

// 模拟发送短信
async function handleSendCode() {
  if (state.smsRetryTimes > 0)
    return
  try {
    checkRules(['phone'], formData)
    toast.loading('正在发送')
    state.smsRetryTimes = 60
    const timer = setInterval(() => {
      if (state.smsRetryTimes > 0) {
        state.smsRetryTimes--
      }
      else {
        clearInterval(timer)
      }
    }, 1000)
    await sendUserLoginSms({
      phone: formData.value.phone,
    })
    toast.success('验证码已发送')
  }
  catch (e: any) {
    toast.error(e.message, {
      duration: 1000,
    })
  }
}

// 登录
async function handleLogin() {
  try {
    if (state.loginType === 'phone') {
      checkRules(['phone', 'code'], formData)
      toast.loading('请稍候')
      // 手机登录
      await userStore.loginByPhone(formData.value.phone, formData.value.code)
    }
    else {
      checkRules(['passport', 'password'], formData)
      toast.loading('请稍候')
      // 账号登录
      await userStore.loginByAccount(
        formData.value.passport,
        formData.value.password,
      )
    }
    // 登录成功跳转
    // 如果使用isLogin + 组件引入的话，后面的代码不会运行
    toast.success('登录成功', {
      duration: 1000,
      onClose: () => {
        uni.switchTab({
          url: '/pages/mine/index',
        })
      },
    })
  }
  catch (e: any) {
    toast.error(e.message, {
      duration: 1000,
    })
  }
}
</script>

<template>
  <view class="main">
    <nut-toast />
    <view class="board">
      <view class="title">
        您好，
        <br>
        欢迎使用本系统
      </view>
    </view>
    <view class="login-view">
      <view class="content">
        <view class="form">
          <nut-tabs v-model="state.loginType">
            <nut-tab-pane class="!p-0" title="手机登录" pane-key="phone">
              <view pt-40rpx class="form-line">
                <text class="txt">
                  手机号
                </text>
                <view class="input">
                  <nut-input
                    v-model="formData.phone"
                    class="!p-0"
                    placeholder="请输入您的手机号"
                    clearable
                  />
                </view>
              </view>
              <view class="form-line">
                <text class="txt">
                  验证码
                </text>
                <view class="input">
                  <nut-input
                    v-model="formData.code"
                    class="!p-0"
                    placeholder="请输入验证码"
                    clearable
                  >
                    <template #right>
                      <nut-button
                        type="info"
                        size="small"
                        plain
                        :disabled="!!state.smsRetryTimes"
                        @click="handleSendCode"
                      >
                        {{
                          state.smsRetryTimes
                            ? `${state.smsRetryTimes}秒后重试`
                            : '获取验证码'
                        }}
                      </nut-button>
                    </template>
                  </nut-input>
                </view>
              </view>
            </nut-tab-pane>
            <nut-tab-pane class="!p-0" title="密码登录" pane-key="account">
              <view pt-40rpx class="form-line">
                <text class="txt">
                  账号
                </text>
                <view class="input">
                  <nut-input
                    v-model="formData.passport"
                    class="!p-0"
                    placeholder="请输入您的登录账号"
                    clearable
                  />
                </view>
              </view>
              <view class="form-line">
                <text class="txt">
                  密码
                </text>
                <view class="input">
                  <nut-input
                    v-model="formData.password"
                    class="!p-0"
                    type="password"
                    placeholder="请输入您的登录密码"
                    clearable
                  />
                </view>
              </view>
            </nut-tab-pane>
          </nut-tabs>
          <view class="buttons">
            <nut-button size="large" type="info" @click="handleLogin">
              登录
            </nut-button>
          </view>
        </view>
      </view>
    </view>
    <text v-if="props.showCopyright && state.copyright" class="copyright">
      {{ state.copyright }}
    </text>
  </view>
</template>

<style lang="scss" scoped>
  .main {
    height: calc(100vh - var(--window-bottom));
    overflow: hidden;
    background-color: #fff;
  }
  .board {
    width: 100%;
    height: 450rpx;
    background-image: url('@/static/board-head.png');
    background-size: 100%;

    .title {
      transform-origin: left;
      font-size: 42rpx;
      color: #ffffff;
      padding: 130rpx 0 0 70rpx;
      font-weight: bold;
      line-height: 70rpx;
    }
  }

  .login-view {
    width: 100%;
    position: relative;
    margin-top: -120rpx;
    background-color: #ffffff;
    border-radius: 4% 4% 0% 0;

    .content {
      margin: 0 60rpx;
      font-size: 28rpx;
      padding-top: 40rpx;
      padding-bottom: 40rpx;

      .uni-input-placeholder {
        color: #aeaeae;
      }

      .form {
        .form-line {
          position: relative;

          .txt {
            font-size: 28rpx;
            font-weight: bold;
            color: #333333;
          }

          .input {
            display: flex;
            height: 90rpx;
            line-height: 90rpx;
            margin-bottom: 40rpx;
            border-bottom: 1px solid #e9e9e9;
            font-size: 28rpx;

            .uni-input {
              padding: 0;
            }
          }
        }
      }
    }
  }

  .copyright {
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: 0;
    transform-origin: right;
    font-size: 24rpx;
    color: #666;
    padding: 20rpx;
  }
</style>

<route lang="json">
{
  "style": {
    "navigationStyle": "default",
    "app-plus": {
      "titleNView": false,
      "bounce": "none"
    },
    "h5": {
      "titleNView": false
    }
  }
}
</route>
